// mela onlie 购物车界面 订制
import { PureComponent } from "react";
import { Button, Modal,Checkbox,List,Stepper,TabBar,PullToRefresh,ListView} from "antd-mobile";
// import { StickyContainer, Sticky } from 'react-sticky';
import { connect } from 'dva';
import { ActivityIndicator } from 'antd-mobile';
import { handleImg, goToPage,handleOSS } from "../../utils/helper";
import { InputItem } from 'antd-mobile';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import { Row, Col } from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { isNull } from '../../utils/helper';
import ReactDOM from 'react-dom';
import MToast from '../../components/Util/MToast';
const CheckboxItem = Checkbox.CheckboxItem;
const alert = Modal.alert;
const Item = List.Item;
@connect(() => {
  return ({

  })
})
export default class UnGoodCart extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      privacyModal:false,
      selectedTab: 'greenTab',
      noLogin:false,
    }
  }
  componentWillMount() {
    let { dispatch, location } = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(localeData[localStorage.locale].cartTitle),
        path: location.pathname + location.search
      }
    });
    if(localStorage[MI_APP_CODE + "phone"]==undefined){
      this.setState({
        noLogin:false
      })
    }else{
      this.setState({
        noLogin:true
      })
    }
  }
  componentDidUpdate() {

  }
  // componentDidMount() {
  //   const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
  //   console.log(this.state.height,ReactDOM.findDOMNode(this.lv).offsetTop,hei)
  //   setTimeout(() => {
  //
  //     this.setState({
  //
  //       height: hei,
  //
  //     });
  //   }, 1500);
  // }
  newLogin=()=>{
    let { dispatch, location } = this.props;
    goToPage({ dispatch, config: { url: "/newLogin" }, isReplace: false })
  }
  goRegister(){
    let {dispatch}=this.props;
    goToPage({ dispatch, config: { url: "/register" }, isReplace: false })
  }
  render() {
    let { dispatch } = this.props;
    let { loading, cartItems, currentQuantity, currentItem_id,isOn,totalPrice1,onChecked,isButton,isBackground,isBackground1,isBackground2,checked,noLogin } = this.state;
    const messages = localeData[localStorage.locale];


    return (
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div className="normal" style={{ background: "#fff", minHeight: "100%" }}>
        <div style={{width:'50%',margin:'10% auto'}}><img src="image/uncart.png" style={{width:'100%'}}/></div>
        <div style={{width:'90%',margin:'0% auto'}}>
          <Button
            style={{background:'#F09600',borderRadius:'20px',border:'none',height:'42px',lineHeight:'42px',width:'100%'}}
            type="primary"
            onClick={this.newLogin}
            >{messages.login}</Button>
        </div>
        {/*<div style={{width:'90%',margin:'6% auto 0'}}>*/}
          {/*<Button*/}
            {/*style={{background:'#F0F2F5',borderRadius:'20px',border:'none',height:'44px',lineHeight:'44px',width:'100%'}}*/}
            {/*onClick={() =>{this.setState({*/}
              {/*privacyModal:true*/}
            {/*})}}*/}
         {/*>{messages.register}</Button>*/}
        {/*</div>*/}
        <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%'}}> <TabBar
          unselectedTintColor="#949494"
          tintColor="#F09600"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title={messages.home}
            key="Life"
            icon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home2.png) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home3.png) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
              goToPage({ dispatch, config: { url: "/shop_home" }, isReplace: false })
            }}
            data-seed="logId"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category1.png) center center /  21px 21px no-repeat' }}
              />
            }
            title={messages.category}
            key="Koubei"

            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
              goToPage({ dispatch, config: { url: "/category" }, isReplace: false })
            }}
            data-seed="logId1"
          >

          </TabBar.Item>
          {noLogin? <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
              />
            }
            title={messages.cart}
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
              goToPage({ dispatch, config: { url: "/goodcart" }, isReplace: false })
            }}
          >
          </TabBar.Item>
            :
            <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
              />
            }
            title={messages.cart}
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
              goToPage({ dispatch, config: { url: "/ungoodcart" }, isReplace: false })
            }}
          >
          </TabBar.Item>}

          <TabBar.Item
            icon={ <div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/my.png) center center /  24px 24px no-repeat' }}
            />}
            selectedIcon={ <div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/my1.png) center center /  24px 24px no-repeat' }}
            />}
            title={messages.my}
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
              goToPage({ dispatch, config: { url: "/my" }, isReplace: false })
            }}

          >

          </TabBar.Item>
        </TabBar></div>
        <Modal
          visible={this.state.privacyModal}
          style={{width:'98%'}}
          transparent
          maskClosable={false}
          title={messages.privacyTitle}
          footer={[{ text:messages.privacyDisagree, onPress: () => this.setState({privacyModal:false}) },
            { text: messages.privacyAgree, onPress: () => this.goRegister() },]}
        >
          <div style={{ height:500, overflow: 'scroll',color:'#606266',fontSize:'14px',textAlign:'left'}}>
            <div style={{marginBottom:'20px'}}>{messages.privacy1}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy2}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy3}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy4}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy5}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy6}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy7}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy8}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy9}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy10}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy11}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy12}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy13}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy14}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy15}</div>
            <div style={{color:'#303133',marginBottom:'20px'}}>{messages.privacy16}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy17}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy18}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy19}</div>
            <div style={{marginBottom:'20px'}}>{messages.privacy20}</div>
            <div style={{marginBottom:'20px',textAlign:'right'}}>{messages.privacy21}</div>
          </div>
        </Modal>

      </div>
  </IntlProvider>
    )
  }
}
